<script setup>
import { message } from 'ant-design-vue';
import { onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { setVarForewarn } from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const formRef = ref();
const labelCol = {
	span: 5
};
const wrapperCol = {
	span: 13
};
const state = reactive({
	formState: {
		code: '',
		var3: '',
		var4: '',
		var5: '',
		var7: '',
		price: '',
		warningValue: ''
	}
});
const router = useRouter();
const route = useRoute();
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			console.log('values', state.formState, toRaw(state.formState));
			account.spinning = true;
			setVarForewarn({
				id: route['query']?.id,
				...state.formState
			})
				.then((res) => {
					account.spinning = false;

					formRef.value.resetFields();
					router.back();
				})
				.catch((err) => {
					account.spinning = false;
					message.error(err);
				});
		})
		.catch((error) => {
			console.log('error', error);
		});
};
const resetForm = () => {
	formRef.value.resetFields();
	router.back();
};
onMounted(() => {
	if (route['query']?.id) {
		state.formState = {
			...route['query']
		};
	}
});
</script>

<template>
	<section class="contain-edit-inbound">
		<section class="edit">编辑超量预警</section>
		<a-form
			ref="formRef"
			:model="state.formState"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
		>
			<a-form-item label="产品编码" name="code">
				<a-input v-model:value="state.formState.code" disabled />
			</a-form-item>
			<a-form-item label="单户用量" name="var3">
				<a-input v-model:value="state.formState.var3" />
			</a-form-item>
			<a-form-item label="单层用量" name="var4">
				<a-input v-model:value="state.formState.var4" />
			</a-form-item>
			<a-form-item label="首层用量" name="var5">
				<a-input v-model:value="state.formState.var5" />
			</a-form-item>
			<a-form-item label="层数" name="var6">
				<a-input v-model:value="state.formState.var6" />
			</a-form-item>
			<a-form-item label="公式" name="var7">
				<a-input v-model:value="state.formState.var7" />
			</a-form-item>
			<a-form-item label="单价" name="price">
				<a-input v-model:value="state.formState.price" />
			</a-form-item>
			<a-form-item label="预警值" name="warningValue">
				<a-input v-model:value="state.formState.warningValue" />
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
				<a-button type="primary" @click="onSubmit">确认</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
			</a-form-item>
		</a-form>
	</section>
</template>

<style scoped>
.contain-edit-inbound {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: auto;
}
.edit {
	box-sizing: border-box;
	margin: 16px 0;
	text-align: center;
	font-size: 16px;
	list-style: none;
}
</style>
